<template>
  <el-card>
    <div class="card-container-wrapper">
      <div class="card-container">
        <div v-for="(item, index) in data" :key="index" class="card gradientStyle">
          <el-col>
            <el-row style="align-items: center;width: 100%;justify-content: center;height: 40px;">
              <span>{{ item.title }}</span>
              <el-select
                  v-if="item.hasOther"
                  style="width: 160px;margin-left: 10px"
                  placeholder="请选择时间段">
              </el-select>
            </el-row>
            <el-row style="margin-top: 10px;width: 100%;justify-content: center">
              <el-date-picker
                  type="date"
                  v-model="selectTime[index]"
                  placeholder="选择生效时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 140px;margin-top: 5px"
              />
            </el-row>
            <el-row style="margin-top: 10px;justify-content: center">
              <el-button type="primary" @click="handleCreate(item.type, index)" :disabled="!item.isEnable">生成</el-button>
            </el-row>
          </el-col>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { ref } from 'vue'
import utils from "@/utils/utils";
import {complaint12398Statistics, create95598Data} from '@/api/work-order'

const data = ref([
  {
    title: '95598日报',
    type: 1,
    hasOther: false,
    isEnable: true
  },
  {
    title: '12398日报',
    type: 2,
    hasOther: false,
    isEnable: true
  },
  {
    title: '管控日报',
    type: 3,
    hasOther: false,
    isEnable: false
  },
  {
    title: '投诉明细日报',
    type: 4,
    hasOther: false,
    isEnable: false
  },
  {
    title: '时段报数',
    type: 5,
    hasOther: true,
    isEnable: false
  },
  {
    title: '业扩日报',
    type: 6,
    hasOther: false,
    isEnable: false
  }
])
const selectTime = ref([])

const handleCreate = (type, index) => {
  switch (type){
    case 1:
      //95598 日报
      handleComplaint95598(index)
      break
    case 2:
      //12398 日报
      handleComplaint12398Statistics(index)
      break
  }
}

const handleComplaint95598 = async (index) => {
  const result = await create95598Data({
    time: selectTime.value[index]
  })
  if (result) {
    utils.showSuccess('后台开始生成数据...')
  }
}

const handleComplaint12398Statistics = async (index) => {
  const result = await complaint12398Statistics({
    time: selectTime.value[index]
  })
  if (result) {
    utils.showSuccess('后台开始生成数据...')
  }
}

</script>
<style scoped>
.card-container-wrapper {
  height: 760px; /* 固定容器高度 */
  overflow-y: auto; /* 竖向滚动 */
  padding: 16px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  margin-top: 20px;
  border-radius: 8px; /* 圆角 */
}

.card-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 16px; /* 卡片之间的间距 */
}

.card {
  flex: 0 0 calc(25% - 16px); /* 每行显示4个卡片，减去间距 */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  min-width: 200px; /* 卡片最小宽度 */
}

@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(25% - 8px); /* 在小屏幕上每行显示2个卡片 */
  }
}

@media (max-width: 480px) {
  .card {
    flex: 1 1 100%; /* 在超小屏幕上每行显示1个卡片 */
  }
}
</style>